<!-- 用户表格 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- bootstrap-table.min.js -->
    <script src="/js/bootstrap-table.js"></script>
    <!-- 引入中文语言包 -->
    <script src="/js/bootstrap-table-zh-CN.js"></script>
</head>

<body>
<!-- 顶头壁纸 -->

    <div class="jumbotron" style="height: 163px; margin-top: -20px;background-image: url(/img/bilibili.webp)">
    </div>

<!-- 用户信息表 -->
    <div class="panel panel-default">
        <div class="panel-heading" style="background: #bce4ef">
            <h3 class="panel-title text-center">用户信息查询</h3>
        </div>
        <form class="form-horizontal">
            <div class="panel-body">

                <div class="form-group">
                    <label for="id_que" class="col-md-1 control-label">ID</label>
                    <div class="col-md-3">
                        <input type="text" id="id_que" class="form-control" >
                    </div>

                    <label for="name_que" class="col-md-1 control-label">姓名</label>
                    <div class="col-md-3">
                        <input type="text" id="name_que" class="form-control">
                    </div>

                    <label for="phone_que" class="col-md-1 control-label">手机</label>
                    <div class="col-md-3">
                        <input type="text" id="phone_que" class="form-control">
                    </div>
                </div>

                <div class="form-group">
                    <label for="status_que" class="col-md-1 control-label">用户状态</label>
                    <div class="col-md-3">
                        <select id="status_que" class="form-control">
                            <option>...</option>
                            <option value="ONLINE">在线</option>  //value是指提交出去的值
                            <option value="OFFLINE">离线</option>
                        </select>
                    </div>

                    <label for="date_que" class="col-md-1 control-label">日期</label>
                    <div class="col-md-3">
                        <input type="date" id="date_que" class="form-control" >
                    </div>
                </div>

                <div class="form-group" style="float: right;margin-right:30px">
                    <button type="button" class="btn btn-info" onclick="queMsg()">查询</button>
                    <button type="reset" class="btn btn-info">重置</button>
                </div>
            </div>
        </form>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading"  style="background: #bce4ef">
            <h3 class="panel-title text-center">用户信息</h3>
        </div>
        <div class="panel-body">
            <div id="toolbar" class="btn-group">
                <button id="btn_read" type="button" class="btn btn-success " data-toggle="modal" onclick="readMsg();">
                    <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>查看
                </button>
                <button id="btn_add" type="button" class="btn btn-info " data-toggle="modal" onclick="addMsg();">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>添加
                </button>
                <button id="btn_edit" type="button" class="btn btn-warning " data-toggle="modal" onclick="updateMsg();">
                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
                </button>
                <button id="btn_delete" type="button" class="btn btn-danger" data-toggle="modal"  onclick="deleteMsg()">
                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                </button>
            </div>
            <table id="teacher_table" data-toggle="table"
                   data-method="post"
                   data-url="http://localhost:8084/table/all"
                   data-query-params="queryParams"
                   data-toolbar="#toolbar"
                   data-pagination="true"
                   data-search="false"
                   data-show-refresh="true"
                   data-show-toggle="true"
                   data-show-columns="true"
                   data-page-size="10">
                <thead>
                <tr>
                    <th data-field="state" data-radio="true"></th>
                    <th data-field="roles" data-formatter="identifyFormatter"  style="width: 100px">身份</th>
                    <th data-field="userId">用户ID</th>
                    <th data-field="userName">名字</th>
                    <th data-field="userPhone">电话</th>
                    <th data-field="userImg" data-formatter="imageFormatter">头像</th>
                </thead>
            </table>
        </div>
    </div>

</body>
</html>
